<template>
	<view class="bill-container flex fd-c">
		<topBar :back="true">
			<template #center style="width: 100%;">
				<!-- 导航栏 -->
				<view class="nav-bar flex ai-c jc-c">
					<view class="nav-tabs">
						兑换详情
					</view>
				</view>
			</template>
		</topBar>
		<!-- 内容区域 -->
		<view class="detail-container">
			<!-- 购物卡展示区域 -->
			<view class="card-display-section">
				<view class="card-container flex ai-c">
					<image :src="BASE_URL + exchangeRecordDetail.goodinfo.image" mode="aspectFit" class="card-image"></image>
				</view>
				<view class="card-info flex ai-c">
					<text class="card-title">{{ exchangeRecordDetail.goodinfo.goods_name }}</text>
				</view>
			</view>

			<!-- 兑换详情信息 -->
			<view class="exchange-details">
				<view class="detail-item jc-sb">
					<text class="detail-label">消耗积分</text>
					<text class="detail-value">{{ exchangeRecordDetail.points }}</text>
				</view>
				<view class="detail-item jc-sb">
					<text class="detail-label">数量</text>
					<text class="detail-value">×{{ exchangeRecordDetail.num }}</text>
				</view>
				<view class="detail-item jc-sb">
					<text class="detail-label">积分兑换订单编号</text>
					<text class="detail-value">{{ exchangeRecordDetail.order_sn }} | <text class="copy-text"
							@click="copyText(exchangeRecordDetail.order_sn)">复制</text></text>
				</view>
				<view class="detail-item jc-sb">
					<text class="detail-label">兑换时间</text>
					<text class="detail-value">{{ formatTime(exchangeRecordDetail.createtime) }}</text>
				</view>
				<view class="detail-item flex jc-sb ai-fs">
					<text class="detail-label">电子卡密</text>
					<view class="detail-value flex fd-c ai-fd">
						<view style="margin-bottom: 16rpx;">{{ exchangeRecordDetail.card_no }}</view>
						<view class="detail-value copy-btn" @click="copyText(exchangeRecordDetail.card_no)" v-if="!exchangeRecordDetail.card_no.includes('工作日')">
							复制
						</view>
					</view>

				</view>
				<view class=" detail-item jc-sb">
					<text class="detail-label">电子卡兑换路径</text>
					<text class="detail-value">{{ exchangeRecordDetail.remark }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import api from '@/api'
import { BASE_URL } from '@/utils/request'
import { formatTime } from '@/utils/utils'
const exchangeRecordDetail = ref({})
onLoad((options) => {
	api.getExchangeRecordDetail({
		exchange_id: options.id
	}).then(res => {
		exchangeRecordDetail.value = res.data
	})
})
const copyText = (text) => {
	uni.setClipboardData({
		data: text,
		success: () => {
			uni.showToast({
				title: '复制成功',
				icon: 'success'
			})
		}
	})
}
</script>

<style scoped>
.bill-container {
	height: 100vh;
	background-color: #fff;
	position: relative;
}

.exchange-records-container {
	padding: 32rpx;
	padding-top: 40rpx;
	flex: 1;
	overflow-y: auto;
}

.exchange-records-item {
	padding: 32rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
}

.nav-bar {
	width: 100%;
	display: flex;
	margin: 0 auto;
}

.back-btn {
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-tabs {
	margin-right: 24px;
	display: flex;
	gap: 64rpx;
	font-size: 32rpx;
	color: #000;
	font-weight: 600;
}

/* 详情页面样式 */
.detail-container {
	flex: 1;
	padding: 32rpx;
	overflow-y: auto;
}

/* 购物卡展示区域 */
.card-display-section {
	padding:48rpx 0;
	margin-bottom: 80rpx;
	padding-bottom: 80rpx;
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #f0f0f0;
}

.card-container {
	position: relative;
}

.card-image {
	width: 176rpx;
	height: 112rpx;
	border-radius: 20rpx;
}

.card-info {
	display: flex;
	gap: 16rpx;
	margin-left: 24rpx;
}

.card-title {
	color: #000;
	font-size: 28rpx;
	font-weight: 600;
}

.card-value {
	color: #000;
	font-size: 32rpx;
	font-weight: 700;
}

/* 兑换详情信息 */
.exchange-details {
	background-color: #fff;
	margin-bottom: 32rpx;
}

.detail-item {
	display: flex;
	padding: 24rpx 0;
}

.detail-item:last-child {
	border-bottom: none;
}

.detail-label {
	color: rgba(0, 0, 0, 0.6);
	font-size: 28rpx;
	width: 230rpx;
	flex-shrink: 0;
}

.detail-value {
	color: #000;
	font-size: 28rpx;
	text-align: right;
}

.copy-btn {
	color: #0F50DC;
	font-size: 26rpx;
	font-weight: 600;
	border: 1px solid #0F50DC;
	padding: 12rpx 24rpx;
	border-radius: 40rpx;

}

.points {
	color: #0F50DC;
	font-size: 32rpx;
	font-weight: 600;
}

.status-success {
	color: #52c41a;
	font-weight: 600;
}

/* 使用说明 */
.usage-instructions {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.instructions-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 24rpx;
	padding-bottom: 16rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.instructions-content {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.instruction-item {
	color: #666;
	font-size: 26rpx;
	line-height: 1.6;
}
</style>
